<template>
	<view class="video-search-page">
		<c-layout>
			<view class="" slot="head">
				<c-status-bar />
				<view class="dark-head">

					<view class="left-icon" @click="publicJS.backOption()">
						<imageForSize size="24" :src="require('@/static/images/user/left.png')"></imageForSize>
					</view>
					<view class="input-box">
						<u-icon name="search" size="30" color="#888890"></u-icon>
						<input type="text" @input="searchValChange" @confirm="searchConfirm()" v-model="searchValue"
							:placeholder="$t('media.enterKeyword')" />
					</view>
					<view class="search" @click="searchConfirm()">
						<text>{{$t('media.search')}}</text>
					</view>
					<view class="input-suggestion-list" v-show="inputSuggestion.show && inputSuggestion.list.length">
						<view @click="suggestionClick(item)" class="input-suggestion-item"
							v-for="(item,index) in this.inputSuggestion.list" :key="index">
							<text>{{item.keywords}}</text>
						</view>
					</view>

				</view>
			</view>
			<view class="video-search-main" v-show="searchResultShow">
				<c-tabs v-model="currentTabs" class="video-search-tabs" @tabClick="searchConfirm()">
					<!-- 用户列表 -->
					<c-tab-pane name="user" :label="'用户'">
						<scroll-list ref="userList" :option="queryParams.user" @refresh="refresh('user')"
							@load="loadMore('user')">
							<view class="user">
								<anchorCard
									:details="{...card,nickName:card.keywords,fans:'',anchorAvatar:card.avatar,userId:card.id}"
									v-for="(card,index) in userData.list" :key="index">
								</anchorCard>
							</view>
						</scroll-list>
					</c-tab-pane>
					<!-- 视频列表 -->
					<c-tab-pane name="video" :label="'视频'">
						<scroll-list ref="videoList" :option="queryParams.video" @refresh="refresh('video')"
							@load="loadMore('video')">
							<view class="video">
								<view class="item" v-for="(card,ind) in videoData.list" :key="card.videoId">
									<videoCard :details="{...card,img:$u.appImage.getOssVideoCover(card.url + '')}"
										@videoInfo='videoInfo(ind)'></videoCard>
								</view>
							</view>
						</scroll-list>
					</c-tab-pane>
				</c-tabs>
			</view>
		</c-layout>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTabs: 'user',
				searchValue: "",
				userData: { // 用户数据
					list: [],
					paging: { // 分页
						pageNum: 1,
						pageSize: 20,
					},
				},
				videoData: { // 视频数据
					list: [],
					paging: { // 分页
						pageNum: 1,
						pageSize: 20,
					},
				},
				// 输入建议
				inputSuggestion: {
					list: [],
					show: false
				},
				inputTimer: null,
				searchResultShow: false, // 最主要是是判断是否查询过 查询过之后再显示 查询的内容部分
			};
		},
		computed: {
			queryParams() {
				return {
					video: { // 视频
						pageNum: this.videoData.paging.pageNum,
						size: this.videoData.paging.pageSize,
						offsetBottom: 10,
						contentHeight: 0,
						safeArea: true,
						auto: false,
						emptyText: this.$t('system.NoRecord'),
						noMoreText: this.$t('system.NoFurtherDataAvailable'),
						showPullDown: false,
						loadDisabled: false
					},
					user: { //用户
						pageNum: this.userData.paging.pageNum,
						size: this.userData.paging.pageSize,
						offsetBottom: 10,
						contentHeight: 0,
						safeArea: true,
						auto: false,
						emptyText: this.$t('system.NoRecord'),
						noMoreText: this.$t('system.NoFurtherDataAvailable'),
						showPullDown: false,
						loadDisabled: false
					}
				}
			},
		},
		methods: {
			videoInfo(index) {
				this.goRecordVideo(index)
			},
			// 跳转视频记录
			goRecordVideo(index) {
				this.$u.vuex('vuex_video_record', {
					list: this.videoData.list,
					index,
					show: true
				})
				uni.navigateTo({
					url: "/pages/public/recordVideo/recordVideo",
					"animationType": "slide-in-right",
					"animationDuration": 300
				})
			},
			// 搜索提交
			searchConfirm(val = this.searchValue, type) {
				if (!val) {
					return
				}
				this.searchResultShow = true
				this.inputSuggestion.show = false
				if (!type) {
					type = this.currentTabs === 'user' ? 3 : 1
				}
				if (type == 3) {
					this.currentTabs = 'user'
					this.getUserAjax(val)
				} else {
					this.currentTabs = 'video'
					this.getVideoAjax(val, type)
				}
			},
			searchValChange(e) {
				// 做个延时，妈的输入中文会触发两次input事件
				if (this.inputTimer) {
					this.inputTimer = clearTimeout(this.inputTimer)
				}
				this.inputTimer = setTimeout(() => {
					if (e.detail.value) {
						this.getInputSuggestionAjax()
					} else {
						this.inputSuggestion.show = false
					}
					this.inputTimer = null
				}, 150)


			},
			// 获取视频
			getVideoAjax(name, type, add) {
				if (!name) {
					name = this.searchValue
				}
				if (!type) {
					type = 1
				}
				this.$u.post('/app/short/video/recommendedList', {
					name,
					type,
					...this.videoData.paging
				}).then(res => {
					const ref = this.publicJS.tryGet(() => this.$refs.videoList[0]) || this.$refs.videoList
					if (add) {
						this.videoData.list = [...this.videoData.list, ...res.data.records]
						console.log(this.videoData.list);
						ref.loadSuccess({
							list: this.videoData.list,
							total: res.data.total
						})
					} else {
						this.videoData.list = res.data.records
						ref.refreshSuccess({
							list: this.videoData.list,
							total: res.data.total
						})
					}
					this.total = res.data.total
				})
			},
			// 获取用户
			getUserAjax(name, add) {
				console.log(name, add, '10086----1-1-1-1-');
				if (!name) {
					name = this.searchValue
				}
				this.$u.get('/app/short/video/querykeywords', {
					keywords: this.searchValue
				}).then(res => {
					const ref = this.publicJS.tryGet(() => this.$refs.userList[0]) || this.$refs.userList
					const data = res.data.filter(f => f.type === 3)
					this.userData.list = data
					ref.refreshSuccess({
						list: this.userData.list,
						total: 0
					})
				})
				// this.$u.post('/app/short/video/querykeywords', {
				// 	name,
				// 	...this.userData.paging
				// }).then(res => {
				// 	const ref = this.publicJS.tryGet(() => this.$refs.userList[0]) || this.$refs.userList
				// 	const data = res.data.records
				// 	if (add) {
				// 		this.userData.list = [...this.userData.list, ...data]
				// 		console.log(this.userData.list);
				// 		ref.loadSuccess({
				// 			list: this.userData.list,
				// 			total: res.data.total
				// 		})
				// 	} else {
				// 		this.userData.list = data
				// 		ref.refreshSuccess({
				// 			list: this.userData.list,
				// 			total: res.data.total
				// 		})
				// 		console.log(this.userData.list);
				// 	}
				// 	this.total = res.data.total
				// })
			},
			// 获取输入建议
			getInputSuggestionAjax() {
				this.$u.get('/app/short/video/querykeywords', {
					keywords: this.searchValue
				}).then(res => {
					this.inputSuggestion.list = res.data
					this.inputSuggestion.show = true
				})
			},
			// 输入建议点击
			suggestionClick(item) {
				this.searchValue = item.keywords
				this.searchConfirm(this.searchValue, item.type)
			},
			// 加载更多
			loadMore(key) {
				switch (key) {
					case 'video':
						this.videoData.paging = {
							...this.videoData.paging,
							pageNum: this.videoData.paging.pageNum + 1,
						}
						this.getVideoAjax(null, null, true)
						break;
					case 'user':
						this.userData.paging = {
							...this.userData.paging,
							pageNum: this.userData.paging.pageNum + 1,
						}
						this.getUserAjax(null, true)
						break;
					default:
						break;
				}
			},
			//刷新
			refresh(key) {
				switch (key) {
					case 'video':
						this.videoData.paging = {
							...this.videoData.paging,
							pageNum: 1,
						}
						this.getVideoAjax()
						break;
					case 'user':
						this.userData.paging = {
							...this.userData.paging,
							pageNum: 1,
						}
						this.getUserAjax()
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-search-page {
		background-color: #000;
		.dark-head {
			padding-top: 20rpx;
			width: 100%;
			height: 100rpx;
			// background-color: #EDEDED;
			display: flex;
			align-items: center;
			position: relative;

			.input-suggestion-list {
				padding-top: 20rpx;
				width: 100%;
				height: 70vh;
				overflow: auto;
				position: absolute;
				bottom: 0;
				transform: translateY(100%);
				background-color: #FAFAFC;
				z-index: 1000;

				.input-suggestion-item {
					padding: 10rpx;
					border-bottom: 2rpx solid #ccc;
				}
			}

			.left-icon {
				padding-left: 30rpx;
			}

			.input-box {
				flex: auto;
				background-color: #1A1E29;
				margin-left: 20rpx;
				height: 66rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				border-radius: 10rpx;

				uni-input {
					width: 100%;
					font-size: 30rpx;
					color: #FAFAFC;
				}

				/deep/ .uni-input-input {
					caret-color: #888890;
				}

				.u-icon {
					margin-right: 8rpx;
				}
			}

			.search {
				color: #888890;
				font-size: 30rpx;
				padding-right: 30rpx;
				padding-left: 10rpx;

			}
		}

		.video-search-main {
			height: 100%;

			/deep/ .video {
				display: flex !important;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					margin-bottom: 20rpx;
				}

				&:after {
					content: '';
					width: 30%;
					height: 0;
					visibility: hidden;
				}
			}

			.user {
				/deep/ .anchor-card-container {
					background-color: #888890;
					border-radius: 20rpx;
					padding: 10rpx;

					&:before {
						content: none;
					}

					.fans {
						display: none;
					}

					.right {
						display: none;
					}
				}
			}

			/deep/ .video-search-tabs {
				height: 100%;
				display: flex;
				flex-direction: column;

				.c-tabs-title {
					padding: 0 20rpx;

					.c-tabs-title-btn {
						background-color: #000;
					}
				}

				.c-tabs-body {
					flex: auto;
					padding: 20rpx 30rpx 0;
				}
			}
		}
	}
</style>